<!--
 * Copyright © 2022
 * @Author: zhangxiang
 * @Date: 2022-10-27 11:09:22
 * @LastEditors: zhangxiang
 * @LastEditTime: 2023-09-21 15:03:06
 * @Description:
 *
-->

<template>
  <el-dialog
    class="scaling-config-dialog"
    :title="isCreate ? '创建伸缩配置' : '查看伸缩配置'"
    :visible="show"
    width="900px"
    top="15vh"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    @close="closeClick"
  >
    <el-row
      type="flex"
      align="middle"
      style="margin-bottom: 15px; margin-right: 15px; float: left"
    >
      <div class="name">云商名称</div>
      <el-select
        v-model="provider"
        size="medium"
        placeholder="请选择云商"
        :disabled="!isCreate"
      >
        <el-option
          v-for="item in cloudVendors"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-row>
    <el-row type="flex" align="middle" style="margin-bottom: 15px">
      <div class="name">配置名称</div>
      <el-input
        v-model="configName"
        size="medium"
        placeholder="请输入伸缩配置名称"
        :disabled="!isCreate"
      />
    </el-row>
    <!-- 推荐规格列表 -->
    <el-table
      key="config"
      v-loading="loading"
      class="dialog-table"
      :data="list"
      header-cell-class-name="listHeaderCell"
      :header-cell-style="{ background: '#F3F3F3', color: '#696969' }"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="60"
        :selectable="getColumnSelectable"
        fixed
      />
      <el-table-column
        prop="name"
        label="规格"
        min-width="100"
        show-overflow-tooltip=""
      />
      <el-table-column prop="cpuCores" label="CPU(Cores)" min-width="100" />
      <el-table-column prop="gpu" label="GPU" min-width="100" />
      <el-table-column prop="memory" label="内存(GiB)" min-width="100" />
      <el-table-column prop="disk" label="硬盘(GiB)" min-width="100" />
      <el-table-column
        prop="systemImage"
        label="镜像"
        min-width="150"
        show-overflow-tooltip=""
      />
      <el-table-column prop="pricingModel" label="计费模式" min-width="100" />
    </el-table>
    <div slot="footer" class="dialog-footer">
      <el-button size="small" @click="cancelClick">取 消</el-button>
      <el-button
        type="primary"
        size="small"
        :loading="confirmLoading"
        @click="confirmClick"
      >确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { isEmptyString } from '@/utils/index'
import {
  addScalingConfig,
  getScalingResourceAll,
  getScalingResourceById
} from '@/api/cnap/hybrid-cloud'
import { mapGetters } from 'vuex'
import cloudVendorHandle from '@/views/mixin/cloudVendorHandle.js'

export default {
  name: 'ScalingConfigDialog',
  components: {},
  mixins: [cloudVendorHandle],
  props: {
    show: {
      type: Boolean,
      default: false
    },
    isCreate: {
      // 是否是创建
      type: Boolean,
      default: true
    },
    info: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      confirmLoading: false, // 确定按钮loading
      provider: '', // 云商名称
      configName: '', // 配置名称
      list: [], // 列表
      loading: false, // 列表loading
      selection: [] // 已选择的列
    }
  },
  computed: {
    /**
     * @description: 用户名
     * @return {*}
     */
    ...mapGetters(['userName']),
    /**
     * @description: 云商参数
     * @return {*}
     */
    cloudVendorValue() {
      return this.provider
    }
  },
  watch: {
    isCreate: {
      handler(newVal) {
        if (!newVal) {
          // 查看模式
          this.provider = this.formatVendorAccount(this.info.provider, this.info.accountName)
          this.configName = this.info.configName
          this.loading = true
          this.getResourceById() // 通过id获取规格
        } else {
          this.loading = true
          this.queryClick()
        }
      },
      immediate: true
    }
  },
  created() {},
  methods: {
    /**
     * @description: 判断列是否可选择
     * @param {*} row
     * @param {*} index
     * @return {*}
     */
    getColumnSelectable(row, index) {
      if (!this.isCreate) {
        return false
      }
      if (
        this.selection.length === 0 ||
        (this.selection.length === 1 && this.selection[0].id === row.id)
      ) {
        // 未选择时 或者 已选择的一项 可以select
        return true
      }
      return false
    },
    /**
     * @description: 处理行选中
     * @param {*} selection
     * @return {*}
     */
    handleSelectionChange(selection) {
      this.selection = selection
    },
    /**
     * @description: 根据已有的资源id查询规格
     * @return {*}
     */
    getResourceById() {
      // 请求
      getScalingResourceById(this.info.cloudResourceIds.join(','))
        .then((res) => {
          this.list = res.data ? [res.data] : []
        })
        .finally(() => {
          this.loading = false
        })
    },
    /**
     * @description: 查询
     * @return {*}
     */
    queryClick() {
      this.getResourceList()
    },
    /**
     * @description: 获取推荐规格列表
     * @return {*}
     */
    getResourceList() {
      // 请求
      getScalingResourceAll({})
        .then((res) => {
          this.list = Array.isArray(res.data) ? res.data : []
        })
        .finally(() => {
          this.loading = false
        })
    },
    /**
     * @description: 确定
     * @return {*}
     */
    confirmClick() {
      if (!this.isCreate) {
        this.closeClick()
        return
      }
      if (isEmptyString(this.provider)) {
        this.$message.warning('云商不能为空')
        return
      }
      if (isEmptyString(this.configName)) {
        this.$message.warning('伸缩配置名称不能为空')
        return
      }
      if (this.selection.length === 0) {
        this.$message.warning('请选择伸缩配置的推荐规格')
        return
      }
      this.confirmLoading = true
      const cloudResourceIds = [] // 规格ids
      this.selection.forEach((element) => {
        cloudResourceIds.push(element.id) //  规格id
      })
      // 添加
      addScalingConfig({
        provider: this.cloudVendorParams.cloudVendor,
        accountName: this.cloudVendorParams.accountName,
        configName: this.configName,
        cloudResourceIds: cloudResourceIds.join(',') // 转为,分割字符
      })
        .then((res) => {
          this.$emit('update:show', false)
          this.$emit('success')
        })
        .finally(() => {
          this.confirmLoading = false
        })
    },
    /**
     * @description: 关闭
     * @return {*}
     */
    closeClick() {
      this.$emit('update:show', false)
    },
    /**
     * @description: 取消
     * @return {*}
     */
    cancelClick() {
      this.closeClick()
      this.$emit('cancel')
    }
  }
}
</script>

<style lang="less" scoped>
@import "@/assets/css/common.less";
.scaling-config-dialog {
  .name {
    .textStyle(14px , 400, #4a4a4a);
    line-height: 20px;
    flex-shrink: 0;
    margin-right: 12px;
  }
  .dialog-table {
    /deep/ .el-table::before {
      background-color: #e9e9e9;
    }
    /deep/ .listHeaderCell {
      height: 40px;
      padding: 0;
      box-sizing: border-box;
      &:first-child {
        padding-left: 13px;
      }
      .cell .el-checkbox {
        display: none;
      }
    }
    /deep/ .el-table__body {
      .el-table__row td {
        height: 40px;
        padding: 0;
        &:first-child {
          padding-left: 10px;
        }
      }
    }
  }
}
</style>
